<script lang="tsx">
import { defineComponent, ref } from "vue"
import props from "./props.ts"

export default defineComponent({
	name: "ChenButton",
	// props静态类型声明
	props,
	setup(props, { slots, expose }) {
		let className = `inner chen-button-var chen-button chen-button-${props.type}`
		className += props.plain ? " plain" : ""
		className += props.rounded ? " rounded" : ""
		className += props.circle ? " circle" : ""
		className += props.disabled ? " disabled" : ""
		className += ` ${props.size}`
		// ref
		const buttonRef = ref(null)
		expose({ ref: buttonRef })
		return () => (
			<button class={className} disabled={props.disabled || props.loading} ref={buttonRef}>
				{props.loading ? <Chen-Icon icon="spinner" spin></Chen-Icon> : ""}
				{props.icon ? <Chen-Icon icon={props.icon}></Chen-Icon> : ""}
				{slots.default ? slots.default() : ""}
			</button>
		)
	},
})
</script>

<style scoped lang="less">
.inner {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
}
</style>
